<template>
  <div id="EmrGrade">
    <!-- <Breadcrumb content="电子病历等级" /> -->
    <div class="bodyContent">
      <el-tabs type="border-card">
        <el-tab-pane label="电子病历等级">
          <Splitpanes class="area">
            <!-- 左侧列表 -->
            <Pane :size="55">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input v-model="searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询"
                    @clear="findFunctionList" @keyup="keyupFeeItemEnter" @search-click="findFunctionList()"></vxe-input>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading"
                    @click="findFunctionList"></vxe-button>
                  <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除"
                    @click="handleDelete"></vxe-button>
                </template>
              </vxe-toolbar>
              <div class="leftTable">
                <vxe-table ref="labFeeItemTable" border class="mytable-scrollbar" height="auto"
                  :scroll-y="{ enabled: true }" resizable show-header-overflow show-overflow align="center"
                  :row-config="{ isCurrent: true, isHover: true }" @current-change="rowClick" :data="EmrGradeList"
                  :loading="showLoading">
                  <vxe-column type="checkbox" width="30px"></vxe-column>
                  <vxe-column type="seq" width="30"></vxe-column>
                  <vxe-column field="gradeCode" title="编号"> </vxe-column>
                  <vxe-column field="gradeName" title="名称"> </vxe-column>
                  <vxe-column field="describe" title="描述" width="260px"> </vxe-column>
                  <vxe-column field="itemNum" title="基本项目数"> </vxe-column>
                  <vxe-column field="selectNum" title="选择项目数">
                    <template #default="{ row }">
                      <span>{{ row.selectNum }}/{{ row.itemSum }}</span>
                    </template> </vxe-column>
                  <vxe-column field="lowestScore" title="最低评分"> </vxe-column>
                </vxe-table>
              </div>
            </Pane>

            <!-- 右侧表单信息 -->
            <Pane :size="45">
              <el-tabs type="border-card">
                <el-tab-pane label="基本信息">
                  <el-form ref="formRef" :model="form" label-width="110px" :rules="formRules"
                    class="form-input-m baseForm" v-loading="showLoading" inline-message>
                    <el-row :gutter="40">
                      <el-col :span="12">
                        <el-form-item label="编号" prop="gradeCode">
                          <el-input v-model="form.gradeCode"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="名称" prop="gradeName">
                          <el-input v-model="form.gradeName"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter="40">
                      <el-col :span="12">
                        <el-form-item label="描述" prop="describe">
                          <el-input v-model="form.describe"></el-input> </el-form-item></el-col>
                      <!-- <el-col :span="12">
                        <el-form-item label="项目基本数">
                          <el-input v-model="form.itemNum"></el-input>
                        </el-form-item>
                      </el-col> -->

                      <el-col :span="12">
                        <el-form-item label="项目基本数" @keyup="keyupEnter($event, 8)" ref="form8">
                          <el-input-number @keyup="keyupEnter($event, 8)" ref="form8" v-model="form.itemNum" :min="0"
                            :max="100" />
                        </el-form-item>
                      </el-col>

                    </el-row>

                    <el-row :gutter="40">
                      <el-col :span="12">
                        <el-form-item label="选择项目数" prop="selectNum">
                          <el-input-number @keyup="keyupEnter($event, 8)" ref="form8" v-model="form.selectNum" :min="0"
                            :max="100" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="最低评分" prop="lowestScore">
                          <el-input-number @keyup="keyupEnter($event, 8)" ref="form8" v-model="form.lowestScore" :min="0"
                            :max="1000" />
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter="40">
                      <el-col :span="12">
                        <el-form-item label="项目总数" prop="itemSum">
                          <el-input-number @keyup="keyupEnter($event, 8)" ref="form8" v-model="form.itemSum" :min="0"
                            :max="200" />
                        </el-form-item>
                      </el-col>
                      <!-- <el-col :span="12">
                        <el-form-item label="顺序" prop="seq">
                          <el-input v-model="form.seq"></el-input>
                        </el-form-item>
                      </el-col> -->
                      <!-- <el-col :span="12">
            <el-form-item label="是否在用" prop="isUse">
              <el-switch v-model="form.status" inline-prompt active-text="是" inactive-text="否" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
          </el-col> -->
                    </el-row>
                    <el-form-item class="form-footer">
                      <template #default>
                        <el-button type="primary" @click="add()">新建</el-button>
                        <el-button type="primary" v-loading="saveLoading" @click="save()">保存</el-button>
                        <!-- <el-button type="default" @click="add()">重置</el-button> -->
                      </template>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
              </el-tabs>
            </Pane>
          </Splitpanes>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息
import { AppStore } from '@/stores/store';

// 全局变量定义区 ==========
// 变量定义区
let { proxy }: any = getCurrentInstance();
let store = AppStore();
let searchValue = ref('');
const orgList = store.userInfo.orgList;
let conWidth = ref(document.documentElement.clientWidth);
let EmrGradeList = reactive([]);
let showLoading = ref(false); //刷新+表格加载
let saveLoading = ref(false); //保存
let showDataLoading = ref(false);
let showKnowLedgeLoading = ref(false);
let formRef = ref(); //form表单标记ref
let form = reactive({
  id: '',
  gradeCode: '',
  gradeName: '',
  describe: '',
  itemNum: '',
  selectNum: '',
  itemSum: '',
  lowestScore: '',
  seq: '',
  orgId: store.userInfo.orgId
});

// form表单校验规则
let formRules: any = {
  gradeCode: [
    {
      required: true,
      message: '请输入编号',
      trigger: 'blur'
    }
  ],
  gradeName: [
    {
      required: true,
      message: '请输入名称',
      trigger: 'blur'
    }
  ]
};

// 方法定义区 =============
onMounted(() => {
  findFunctionList();
});

// 获取申请项目列表
function findFunctionList() {
  EmrGradeList.length = 0;
  showLoading.value = true;
  const url = '/emr/grade/findEmrGradeList';
  let obj = {
    gradeName: searchValue.value,
    orgId: form.orgId
  };
  proxy.$http
    .get(url, { params: obj })
    .then((res: any) => {
      EmrGradeList.push(...res.data);
      if (EmrGradeList.length > 0) {
        rowClick({
          row: EmrGradeList[0]
        });
      }

      showLoading.value = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      showLoading.value = false;
    });
}

// 删除数据
function handleDelete() {
  const selectRows = (proxy.$refs.labFeeItemTable as any).getCheckboxRecords();
  if (selectRows.length <= 0) {
    VxeMessage('请选择需要删除的数据', VxeNotifyType.warning);
    return;
  } else {
    proxy
      .$confirm('您确定要删除当前选中的这条数据吗?', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        const commaSeparatedIds = selectRows.map((row) => row.id);
        const commaSeparatedNames = selectRows.map((row) => row.instrName);
        const ids = commaSeparatedIds.join(',');
        const names = commaSeparatedNames.join(',');
        const data = { ids: ids, names: names };
        const url = '/emr/grade/deleteEmrGrade';
        proxy.$http
          .post(url, data)
          .then((res: any) => {
            findFunctionList(); // 获取检验仪器表格数据
            VxeMessage(res.status.msg, VxeNotifyType.success);
          })
          .catch((err: any) => {
            VxeMessage(err, VxeNotifyType.error);
          });
      });
  }
}
// 点击当前行// 行点击事件
const rowClick = ({ row }) => {
  Object.assign(form, row);
  // Object.assign(form, row);
};

// 新建&重置
function add() {
  for (let key in form) {
    switch (typeof form[key]) {
      case 'string':
        form[key] = '';
        break;
      case 'number':
        form[key] = 0;
        break;
    }
  }
  const el: any = proxy.$refs['formRef'];
  el.resetFields();
}

// 保存
function save() {
  formRef.value?.validate((valid: any) => {
    if (!valid) {
      VxeMessage('校验表单失败', VxeNotifyType.error);
      return false;
    }

    let url = '';
    if (form.id == '' || form.id == null || form.id == undefined) {
      url = '/emr/grade/addEmrGrade';
    } else {
      url = '/emr/grade/editEmrGrade';
    }
    proxy.$http
      .post(url, form)
      .then((res: any) => {
        VxeMessage(res.status.msg, VxeNotifyType.success);
        findFunctionList();
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
  });
}

// 回车查询
function keyupFeeItemEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findFunctionList();
  }
}
</script>
<style lang="scss" scoped>
#EmrGrade {
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);

    .el-tabs {
      height: 100%;

      :deep(.el-tabs__content) {
        height: calc(100% - 39px);
        padding: 0;
      }

      .el-tab-pane {
        height: 100%;

        .area {
          background-color: $base-white;

          // 附加按钮间距
          .button-blue,
          .button-red {
            margin: 5px 0 5px 5px;
          }

          .leftTable {
            height: calc(100% - 40px);
            // .vxe-table--render-wrapper {
            //   height: 100%;
            //   .vxe-table--main-wrapper {
            //     height: 100%;
            //     .vxe-table--body-wrapper {
            //       height: calc(100% - 26px) !important;
            //     }
            //   }
            // }
            // .vxe-table--render-default {
            //   height: 100%;
            // }
          }

          // 右侧基本信息表单
          .baseForm {
            .el-row {
              margin-left: 0 !important;
              margin-right: 0 !important;
            }

            .form-footer {
              .el-form-item__content {
                margin-left: 120px !important;
              }
            }

            .el-form-item--large {
              margin-bottom: 10px;
            }

            .el-radio {
              margin-right: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
